<template>
  <div class="page-container-padding">
    <div style="margin-bottom: 10px;">
      <el-date-picker v-model="queryDate" :clearable="false" style="width:320px;"></el-date-picker>
      <el-button size="mini" type="primary" style="margin:0 10px;" @click="querySpotForFill">查询数据</el-button>
      <el-checkbox v-model="onlyShowNoPrice" @change="onlyShowChange">只显示未填/填报不全的品种</el-checkbox>
      <el-button size="mini" type="primary" @click="saveSpotPriceFill" :loading="saveLoading" style="margin-left:100px;">保存今日数据</el-button>
    </div>
    <div style="display:flex;align-items:center;margin:6px 0;">
      <el-input style="width:320px;margin-right:10px;" v-model="copyVarietyOrder" clearable size="mini" placeholder="输入粘贴数据品种顺序(英文中横线隔开)例:A-B-C"></el-input>
      <el-button type="primary" size="mini" @click="toSaveVarietyOrder">设定顺序</el-button>
      <el-input @change="copyPriceChange" style="width:400px;margin-left:10px;" clearable v-model="copyPriceOrder" placeholder="今日现货数据(空格间隔)例: 100   200   300"></el-input>
    </div>
    <!-- 填报表 -->
    <div style="width:822px;" v-loading="spotPriceLoading">
    <el-table :data="spotList" border>
      <el-table-column width="110px" prop="spot_date" label="日期"></el-table-column>
      <el-table-column width="105px" prop="variety_name" label="品种"></el-table-column>
      <el-table-column width="105px" prop="variety_en" label="交易代码"></el-table-column>
      <el-table-column width="150px" label="现货价格">
        <template slot-scope="scope">
          <el-input v-model="scope.row.price" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="350px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.src_note" size="mini"></el-input>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
  let NAME_SPACE = 'V04'  // 现货价格填报
  import { saveStorageData, getStorageData } from '@/utils/storageHandler'
  import { getSpotForFill, saveSpotFill } from '@/api/analysisData/spot'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data(){
      return {
        onlyShowNoPrice: false,

        copyVarietyOrder: '',
        copyPriceOrder: '',

        spotPriceLoading: false,
        saveLoading: false,
        spotListCache: [],
        spotList: [],
        queryDate: new Date()
      }
    },
    watch: {
      copyPriceOrder(n, o){
        this.copyPriceChange()
      }
    },
    mounted() {
      this.copyVarietyOrder = getStorageData('spotFillVarietyOrder')
      console.log(this.copyVarietyOrder);
      this.querySpotForFill()
    },
    methods:{
      querySpotForFill(){
        const params = {date: datetimeToStr(this.queryDate, true, '')}
        this.spotPriceLoading = true
        getSpotForFill(params).then(res => {
          this.spotListCache = res.data
          let spotShowList = []
          if (this.onlyShowNoPrice){
            for (let i=0;i<this.spotListCache.length;i++){
              let spotObj = this.spotListCache[i]
              if (spotObj.price === 0 || spotObj.src_note === '-' || spotObj.src_note === ''){
                spotShowList.push(JSON.parse(JSON.stringify(spotObj)))
              }
            }
          }else{
            spotShowList = JSON.parse(JSON.stringify(this.spotListCache))
          }
          this.spotList = spotShowList
          this.spotPriceLoading = false
        })
      },

      // 保存粘贴使用的品种顺序
      toSaveVarietyOrder(){
        saveStorageData(this.copyVarietyOrder, 'spotFillVarietyOrder')
        this.$baseMessage('设置成功!', 'success')
      },

      // 贴入数据改变
      copyPriceChange(){
        let priceOrderList = this.copyPriceOrder.split(/\s+/)
        let varietyOrderList = this.copyVarietyOrder.split('-')
        for (let i=0;i<varietyOrderList.length;i++){
          let vObj = varietyOrderList[i]
          for (let j=0;j<this.spotList.length;j++){
            if (vObj === this.spotList[j].variety_en){
              let p = parseFloat(priceOrderList[i])
              if (!Number.isNaN(p)){
                this.spotList[j].price = priceOrderList[i]
              }else{
                this.spotList[j].price = 0
              }
              break
            }
          }
        }
      },

      saveSpotPriceFill(){
        this.saveLoading = true
        saveSpotFill(this.spotList).then(res => {
          this.$baseMessage(res.msg, 'success')
          this.saveLoading = false
        })
      },

      // 只显示未填报变化
      onlyShowChange(){
        this.querySpotForFill()
      }
    }
  }
</script>

<style>
</style>
